<template>
  <div class="add-product-wrapper">
    <el-form label-width="108px" :model="form" ref="form" :rules="rules">
      <el-card style="margin: 20px 20px; font-size: 14px">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <el-row>

          <el-col :span="24">
            <el-form-item label="节目单日期" prop="beginDate">
              <el-date-picker v-model="form.beginDate" value-format="yyyy-MM-dd"  type="date" placeholder="节目单日期">
              </el-date-picker>
              <!-- <el-date-picker v-model="form.beginDate" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="节目单日期">
              </el-date-picker> -->
            </el-form-item>
          </el-col>



        </el-row>
      </el-card>

      <div class="tc">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getplan, addplan, updateplan } from "@/api/program/program";
export default {
  name: "Addprogram",
  dicts: [],
  components: {},
  data() {
    return {
      rules: {
        beginDate: [{ required: true, message: "请选择节目日期", trigger: "blur" }],

      },
      form: {

      },

    };
  },
  watch: {
    // 监听路由对象本身
    '$route'(to, from) {
      // 检查参数的变化
      console.log('9999')
      if (to.query.id!== from.query.id) {
        // 参数发生变化时的处理逻辑
        if(to.query.id){
          this.getInfo(to.query.id);
          this.form.goodId=to.query.goodId
          this.form.name=to.query.goodName
        }else{
          this.form.goodId=to.query.goodId
          this.form.name=to.query.goodName
          this.form={}
        }
       
      }
    }
  },
  created() {
    this.form.goodId=this.$route.query.goodId
    this.form.name=this.$route.query.goodName
    const { id } = this.$route.query;
    if (id) {
     
      this.getInfo(id);
    }
  },
  methods: {
    getInfo(id) {
      getplan(id).then((response) => {
        let data = response

        this.form = data;

      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateplan(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addplan(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
            });
          }
          this.cancel();
        } else {

        }
      });
    },
    cancel() {
      this.$tab.closeOpenPage({ path: "/performManagement/programList?id="+this.$route.query.goodId+'&goodName='+this.form.name });
    },
  },
};
</script>

<style lang="stylus">
  .add-product-wrapper {
    padding: 12px;
  
    .content {
      margin: 0 auto;
      width: 75%;
      min-width: 800px;
    }
  
    .sku-wrapper {
      background-color: #f7f8fa;
      padding: 12px;
  
      .sku_sorts {
        .sku_sort {
          background-color: white;
          margin-bottom: 12px;
  
          .label {
            padding: 8px;
          }
  
          .values {
            padding: 8px 0 0 8px;
            border-top: 1px solid $border-color;
            display: flex;
            flex-wrap: wrap;
  
            .value {
              padding: 0 32px 8px 0;
              width: 200px !important;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  
    .img-upload-mini .el-upload--picture-card {
      width: 48px;
      height: 48px;
      line-height: 57px;
    }
  }
  </style>